<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>测试 - layui</title>
  <link rel="stylesheet" href="layui/css/layui.css">
  <link rel="stylesheet" href="css/shijgy.css" />
  <link rel="stylesheet" href="css/flex.css" />

</head>

<body>
  <div class="container">
    <div class="top">
      一村九园可视化管理市级平台
    </div>
    <div class="box s-b">
      <div class="box_left">
        <!-- 顶部标题 -->
        <div class="aj-c">
          <div class="left_xzzc aj-c">果园水果产量分析</div>
        </div>
        <div class="f-end mt-30">
          <div class="select_box flex aj-c mr-10">
            <div class="select_box_left"></div>
            <div class="select_box_title">2022</div>
            <div class="select_box_right"></div>
          </div>
        </div>
        <!-- 果园水果产量分析的echarts -->
        <div class="aj-c mb-50">
          <div class="xzzc_top_e aj-c"  >

          </div>
        </div>
        <div class="aj-c   mb-30">
          <div class="left_xzzc aj-c">果园销售量及销售金额分析</div>
        </div>
        <div class="f-end mt-30">
          <div class="select_box flex aj-c mr-10">
            <div class="select_box_left"></div>
            <div class="select_box_title">2022</div>
            <div class="select_box_right"></div>
          </div>
        </div>
        <div class="xzzc_bottom_e mt-30">

        </div>

      </div>
      <div class="box_center">
        <!-- 地图区域 -->
        <div class="box_center_top ">
          <div class="aj-c mt-15 top_title">累计销售总额</div>
          <div class="mb-30 mt-15 aj-c num_mony">

          </div>
          <div class="s-b">
            <div class="box_center_top_box">
              <div class="box_center_top_left aj-c mb-36">
                种类面积
              </div>
              <div class="box_center_top_left aj-c mb-36">
                设施数量
              </div>
              <div class="box_center_top_left aj-c mb-36">
                病虫害监测
              </div>

            </div>
            <!-- 地图echarts -->
            <div class="maps">

            </div>

            <div class="box_center_top_box">
              <div class="box_center_top_left aj-c mb-36">
                种类产量
              </div>
              <div class="box_center_top_left aj-c mb-36">
                种类销售量
              </div>
              <div class="box_center_top_left aj-c mb-36">
                种类销售额
              </div>

            </div>
          </div>
          <!-- 温度湿度光照强度等 -->
          <div class="mt-13 flex s-b">
            <div class="qihoubox pt-11">
              <div class="aj-c qihounum mt-14 mb-11">32°C</div>
              <div class="aj-c qihoutitle">温度</div>
            </div>
            <div class="qihoubox  pt-11">
              <div class="aj-c qihounum mt-14 mb-11">40%</div>
              <div class="aj-c qihoutitle">湿度</div>
            </div>
            <div class="qihoubox  pt-11">

              <div class="aj-c qihounum mt-14 mb-11">20000lx</div>
              <div class="aj-c qihoutitle">光照强度</div>
            </div>
            <div class="qihoubox  pt-11">

              <div class="aj-c qihounum mt-14 mb-11">25mm</div>
              <div class="aj-c qihoutitle">降雨量</div>
            </div>
            <div class="qihoubox  pt-11">

              <div class="aj-c qihounum mt-14 mb-11">5/s</div>
              <div class="aj-c qihoutitle">风速</div>
            </div>
            <div class="qihoubox  pt-11">

              <div class="aj-c qihounum mt-14 mb-11">1000hpa</div>
              <div class="aj-c qihoutitle">气压</div>
            </div>
            <div class="qihoubox  pt-11">

              <div class="aj-c qihounum mt-14 mb-11">6.5</div>
              <div class="aj-c qihoutitle">土壤pH</div>
            </div>
          </div>
        </div>
        <!-- 疫情区域 -->
        <div class="box_center_center mt-20">
          <div class="flex">
            <div class="left_xzzc aj-c">水果行情走势</div>
            <div class="select_box flex aj-c mr-10">
              <div class="select_box_left"></div>
              <div class="select_box_title aj-c">苹果</div>
              <div class="select_box_right" style="margin-left: 0;"></div>
            </div>
          </div>
          <div class="gyxsje">

          </div>
        </div>
        <!-- tab切换区域 -->
        <div class="j-c ml-75">
          <div class="box_center_bottom_item flex">
            <div class="bottom_item_bg aj-c xc"style="z-index: 111;" onclick="tabs('xc')">数字乡村</div>
            <div class="bottom_item_bg aj-c gy"style="z-index: 111;" onclick="tabs('gy')">数字果园</div>
            <div class="bottom_item_bg aj-c cy"style="z-index: 111;" onclick="tabs('cy')">数字菜园</div>
          </div>
        </div>


      </div>
      <div class="box_right">

        <div class="left_xzzc aj-c">果园库存</div>
        <div class="mt-30 gykcecharts"></div>
        <div class="aj-c mt-28">
          <div class="left_xzzc aj-c">果园营收排名</div>
        </div>
        <div class="box_right_tab  flex  mt-24">
          <div class="aj-c  mr-30 yds" onclick="ydsbox('yds')">月度</div>
          <div class="aj-c  mr-30 jss" onclick="ydsbox('jss')">季度</div>
          <div class="aj-c  mr-30 nds" onclick="ydsbox('nds')">年度</div>
        </div>
        <!-- 果园营收排名echarts -->
        <div class="mt-24 gyyscharts">

        </div>
      </div>
    </div>
  </div>
  <!-- 引入 layui.js 的 <script> 标签最好放置在 html 末尾 -->
  <script src="js/jquery-3.4.1.min.js"></script>

  <script src="js/flexible.js"></script>
  <script src="js/echarts.min.js"></script>
  <script type="text/javascript" src="js/echarts-gl.min.js"></script>
  <script type="text/javascript" src="js/geoCitys.js"></script>
  <!-- 先引入jquery -->
  <script src="layui/layui.js"></script>
  <script src="js/shijigy.js"></script>

  <script>

    // 还可以加参数，进行更优雅的做法
    let num = 456461654999;
    const options = {
      style: 'currency',
      currency: 'CNY',
    };
    var mony = (num).toLocaleString('zh-CN', options); // ¥999,999.00

    mony = mony.slice(1);
    mony = mony.split('')
    mony.forEach(element => {
      document.querySelector('.num_mony').innerHTML += ` <div class="box_center_top_nums aj-c">${element}</div>`
    });

    document.querySelectorAll('.box_center_top_nums').forEach(item => {
      if (item.innerHTML == ',' || item.innerHTML == '.') {
        console.log(item)
        item.className = 'aj-c dou';
      }
      if(item.innerHTML == '.'){
        item.className = 'aj-c dian';
      }
    });
    (function () {
      document.getElementsByClassName('xc')[0].className = 'bottom_item_bg aj-c xc';
      document.getElementsByClassName('cy')[0].className = 'bottom_item_bg aj-c cy';
      document.getElementsByClassName('gy')[0].className = 'bottom_item_bg aj-c gy box_center_bottom_item_active'
      document.getElementsByClassName('yds')[0].className = 'aj-c  mr-30 yds yds_item_active';
    })();

    // 果园营收排名
    document.getElementsByClassName('yds')[0].className = 'aj-c  mr-30 yds yds_item_active';
    document.getElementsByClassName('jss')[0].className = 'aj-c  mr-30 jss '
    document.getElementsByClassName('nds')[0].className = 'aj-c  mr-30 nds'
    // tab切换区域
    function tabs(value) {
      switch (value) {
        case 'cy':
          document.getElementsByClassName('cy')[0].className = 'bottom_item_bg aj-c xc box_center_bottom_item_active';
          document.getElementsByClassName('gy')[0].className = 'bottom_item_bg aj-c cy '
          document.getElementsByClassName('xc')[0].className = 'bottom_item_bg aj-c cy'
          window.location.href = './shijicy.html'

          break;
        case 'gy':
          document.getElementsByClassName('cy')[0].className = 'bottom_item_bg aj-c xc  ';
          document.getElementsByClassName('gy')[0].className = 'bottom_item_bg aj-c cy box_center_bottom_item_active'
          document.getElementsByClassName('xc')[0].className = 'bottom_item_bg aj-c cy'
          window.location.href = './shijigy.html'

          break;
        case 'xc':
          document.getElementsByClassName('cy')[0].className = 'bottom_item_bg aj-c xc ';
          document.getElementsByClassName('gy')[0].className = 'bottom_item_bg aj-c cy '
          document.getElementsByClassName('xc')[0].className = 'bottom_item_bg aj-c cy box_center_bottom_item_active'
          window.location.href = './shijixc.html'
          break;

        default:
          break;
      }
    }

    // 月度
    function ydsbox(value) {
      console.log(value, 'value')
      switch (value) {
        case 'yds':
          document.getElementsByClassName('yds')[0].className = 'aj-c  mr-30 yds yds_item_active';

          document.getElementsByClassName('jss')[0].className = 'aj-c  mr-30 jss '
          document.getElementsByClassName('nds')[0].className = 'aj-c  mr-30 nds'
          gyyscharts([6000, 62000, 6000, 6000, 6000, 5000], [2012, 3230, 3790, 5349, 1654, 1230]);

          break;
        case 'jss':
          document.getElementsByClassName('yds')[0].className = 'aj-c  mr-30 yds';
          document.getElementsByClassName('jss')[0].className = 'aj-c  mr-30 jss yds_item_active'
          document.getElementsByClassName('nds')[0].className = 'aj-c  mr-30 nds'
          gyyscharts([6000, 62000, 6000, 6000, 6000, 5000], [3012, 1230, 2790, 2349, 2654, 2230]);

          break;
        case 'nds':
          document.getElementsByClassName('yds')[0].className = 'aj-c  mr-30 yds';
          document.getElementsByClassName('jss')[0].className = 'aj-c  mr-30 jss  '
          document.getElementsByClassName('nds')[0].className = 'aj-c  mr-30 nds yds_item_active'
          gyyscharts([16000, 6000, 6000, 6000, 6000, 5000], [3012, 2230, 3790, 1349, 2654, 3230]);

          break;

        default:
          break;
      }

    }
    // 季度

  </script>
  <script>
    // 果园水果产量分析 
    xzzc_top_e();
    // 果园销售量及销售金额分析
    xzzc_bottom_e();
    //水果行情走势 
    gyxsje();
    // 果园库存
    gykcecharts([
      {
        name: "苹果",
        value: 2500,
      },
      {
        name: "桃子",
        value: 8000,
      },
      {
        name: "火龙果",
        value: 3000,
      },
      {
        name: "大枣",
        value: 3000,
      },
      {
        name: "杏",
        value: 3000,
      },
      {
        name: "葡萄",
        value: 3000,
      },
      {
        name: "草莓",
        value: 3000,
      },
      {
        name: "梨",
        value: 3000,
      },
    ])
    // 果园营收排名 
    gyyscharts([6000, 6000, 6000, 6000, 6000, 5000], [3012, 1230, 3790, 2349, 1654, 1230])
    // 地图
    maps()
  </script>
</body>

</html>